<template>
  <div id="chargeLog">
    <com-head :opacity="0">{{name}}</com-head>
    <!-- 充值消费记录 -->
    <div class="chargeLog xiaofei" v-for="item in chargeLog1" :key="item.id" v-if="status==='1'">
      <div class="left">
        <p>购买{{item.book}}{{item.chapter}}</p>
        <p>{{item.spend_time}}</p>
      </div>
      <div class="right" :class="{active: item.money>0}">{{item.spend_account}}</div>
    </div>
    <!-- 充值 -->
    <div class="chargeLog xiaofei" v-for="item in chargeLog2" :key="item.id" v-if="status==='1'">
      <div class="left">
        <p>充值{{item.rech_amount}}</p>
        <p>{{item.rech_create_time}}</p>
      </div>
      <div class="right" :class="{active: item.rech_amount>0}">{{item.rech_amount}}</div>
    </div>
      <div v-if="status=='1'&&!chargeLog2.length&&!chargeLog1.length" style="margin-top: 30vh; text-align: center;">暂无记录</div>

    <!-- 佣金记录 -->
    <div class="chargeLog" v-for="item in commission1" :key="item.id" v-if="status==='2'">
      <div class="left">
        <p>{{item.name}}</p>
        <p>{{item.add_time}}</p>
      </div>
      <div class="right yongjin" :class="{active: item.money>0}">
        <p>{{item.balance}}</p>
        <p>余额：{{item.last_balance}}</p>
      </div>
    </div>
    <!-- 提现 -->
    <div class="chargeLog" v-for="item in commission2" :key="item.id" v-if="status==='2'">
      <div class="left">
        <p>提现</p>
        <p>{{item.cash_addtime}}</p>
      </div>
      <div class="right yongjin" :class="{active: item.money>0}">
        <p>{{item.cash_amount}}</p>
        <p>余额：{{item.balance}}</p>
      </div>
    </div>
    <div v-if="status=='2'&&!commission2.length&&!commission1.length" style="margin-top: 30vh; text-align: center;">暂无记录</div>
  </div>
</template>

<script>
export default {
  name: "chargeLog",
  data() {
    return {
      status: this.$route.query.status,
      chargeLog1: [
        // {
        //   content: "购买《好好说话》第5章演讲：靠语言的靠语言的靠语言的",
        //   time: "2018-11-08",
        //   money: "-10"
        // },
        // {
        //   content: "购买《好好说话》第5章演讲：靠语言的靠语言的靠语言的",
        //   time: "2018-11-08",
        //   money: "0"
        // },
        // {
        //   content: "充值",
        //   time: "2018-11-08",
        //   money: "+10"
        // }
      ],
      chargeLog2: [],
      commission1: [
        // {
        //   content: "购买《好好说话》第5章演讲：靠语言的靠语言的靠语言的",
        //   time: "2018-11-08",
        //   money: "-10"
        // },
        // {
        //   content: "购买《好好说话》第5章演讲：靠语言的靠语言的靠语言的",
        //   time: "2018-11-08",
        //   money: "0"
        // },
        // {
        //   content: "充值",
        //   time: "2018-11-08",
        //   money: "+10"
        // }
      ],
      commission2: []

      //   active: false
    };
  },

  computed: {},

  created() {
    if (this.status == "1") {
      //充值消费记录
      this.name = "充值消费记录";
      this.loading1();
    } else if (this.status == "2") {
      //佣金记录
      this.name = "佣金记录";
      this.loading2();
    }
  },

  mounted() {},

  methods: {
    loading1() {
      this.axios
        .post("user/record", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.chargeLog2 = data.recharges;
            this.chargeLog1 = data.spends;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loading2() {
      this.axios
        .post("user/comrecord", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.commission1 = data.data;
            this.commission2 = data.cash;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
#chargeLog {
  .chargeLog {
    margin: 0 32px;
    height: 144px;
    border-bottom: 1Px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 480px;
      p:nth-of-type(1) {
        // padding-top: 20px;
        font-size: 28px;
        color: #222;
        line-height: 60px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:nth-of-type(2) {
        font-size: 24px;
        color: #888;
        line-height: 40px;
      }
    }
    .right {
      font-size: 40px;
      font-weight: 500;
      color: rgba(34, 34, 34, 1);
      font-family: PingFangSC-Medium;
    }
    .yongjin {
      text-align: right;
      p:nth-of-type(1) {
        font-weight: 500;
        // padding-top: 20px;
        box-sizing: border-box;
      }
      p:nth-of-type(2) {
        font-weight: 400;
        font-size: 26px;
        color: #888;
        line-height: 40px;
      }
    }
    .active {
      color: #ec0202;
    }
  }
  .xiaofei {
    .left {
      width: 550px;
    }
  }
}
</style>